<template>
  <div class="video-survei-container">
    <div class="control-panel">
      <input type="text" v-model="cameraId" placeholder="输入摄像头编号" />
      <button @click="findCamera">查找摄像头</button>
    </div>
    <!-- 可以在这里添加一个列表来显示查找到的摄像头信息，或者直接在地图上高亮 -->
  </div>
</template>

<script setup>
import { ref, inject } from 'vue';
// 假设 OpenLayers (ol) 和 Zondy (Zondy) 是通过 OL_SDK 全局引入的
// 或者通过 import { ... } from 'ol/...' 等方式引入

const map = inject('mapInstance', ref(null)); // 注入地图实例
const cameraId = ref('');
const cameraLayer = ref(null); // 用于显示查找到的摄像头点位

// 模拟的摄像头数据，实际应用中应从API或HDF文件处理后的数据源获取
const mockCameraData = [
  {
    id: 'CAM001',
    name: '路口摄像头001',
    coordinates: [114.305, 30.500], // 经纬度
    details: '负责监控中山路与解放路交叉口'
  },
  {
    id: 'CAM002',
    name: '公园摄像头002',
    coordinates: [114.310, 30.505],
    details: '公园入口监控'
  },
  {
    id: 'CAM003',
    name: '桥梁摄像头003',
    coordinates: [114.295, 30.495],
    details: '长江大桥桥面监控'
  },
];

const createCameraFeature = (camera) => {
  const feature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat(camera.coordinates)),
    name: camera.name,
    id: camera.id,
    details: camera.details,
  });

  // 设置摄像头图标和编号样式
  feature.setStyle(
    new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'https://openlayers.org/en/latest/examples/data/icon.png', // 替换为你的摄像头图标
        scale: 0.5,
      }),
      text: new ol.style.Text({
        text: camera.id, // 显示摄像头编号
        offsetY: -25,
        fill: new ol.style.Fill({ color: '#000' }),
        stroke: new ol.style.Stroke({ color: '#fff', width: 2 }),
      }),
    })
  );
  return feature;
};

const findCamera = () => {
  if (!map.value) {
    console.warn('地图实例未提供给 VideoSurvei 组件');
    return;
  }
  if (!cameraId.value) {
    alert('请输入摄像头编号');
    return;
  }

  // 清除上一次查询结果
  if (cameraLayer.value) {
    map.value.removeLayer(cameraLayer.value);
    cameraLayer.value = null;
  }

  const foundCamera = mockCameraData.find(cam => cam.id.toLowerCase() === cameraId.value.toLowerCase());

  if (foundCamera) {
    const cameraFeature = createCameraFeature(foundCamera);
    const vectorSource = new ol.source.Vector({
      features: [cameraFeature],
    });
    cameraLayer.value = new ol.layer.Vector({
      source: vectorSource,
      title: 'FoundCameraLayer',
    });
    map.value.addLayer(cameraLayer.value);
    // 将视图中心移动到摄像头位置并放大
    map.value.getView().animate({
      center: ol.proj.fromLonLat(foundCamera.coordinates),
      zoom: 15, // 可以调整缩放级别
      duration: 1000, // 动画时长
    });
    console.log('找到摄像头:', foundCamera);
  } else {
    alert('未找到编号为 ' + cameraId.value + ' 的摄像头');
    console.log('未找到摄像头:', cameraId.value);
  }
};

</script>

<style scoped lang="scss">
.video-survei-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 5px; /* 与其他按钮保持间距 */
}

.control-panel {
  display: flex;
  gap: 5px;
  align-items: center;
}

input[type="text"] {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  width: 120px; /* 调整输入框宽度 */
}

button {
  padding: 6px 10px;
  background-color: #5cb85c; /* 绿色，表示查找/确认 */
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

button:hover {
  background-color: #4cae4c;
}
</style>